<template>
    <l-dialog
        title="数据对象选择"
        ref="formDialog"
        width="1000px"
        :height="640"

        :visible.sync="midVisible"
        :hasBtns="multiple"
        @close="closeDialog"
        @opened="handleOpened"
        @ok="okDialog"
        >
        <l-select-panel
            style="padding:8px;"
            ref="selectPanel"
            v-model="value"

            :isRefresh="true"
            :selectedData.sync="selectedData"
            :columns="columns"
            :isPage="true"
            :loadSelectTable="loadSelectTable"
            :refreshData="refreshData"
            :multiple="multiple"
            model="client"
            valueKey="f_TableName"

            @rowClick="handleRowClick"
            >
            <template #btns >
                <el-button-group>
                    <el-button size="mini" @click="handleOpenImport">
                        导入表
                    </el-button>
                </el-button-group>
            </template>
            <template v-slot:f_State="scope" >
                <el-tag v-if="scope.row.f_State == 1" size="mini" type="success">同步</el-tag>
                <el-tag v-else size="mini" type="danger">未同步</el-tag>
            </template>
        </l-select-panel>


        <l-dbtable-selectdialog 
            :visible.sync="dbTableVisible"
            :dbCode="this.dbCode"
            :isOkClose="false"
            @select="dbTableSelect"
            >
        </l-dbtable-selectdialog>
    </l-dialog>
</template>
<script>

const api = window.$api.data.codeTable
export default {
    name:'l-codetable-selectdialog',
    props: {
        visible:{
            type:Boolean,
        },
        dbCode:String,
        multiple:{
            type:Boolean,
            default:true
        },
        isOkClose:{
            type:Boolean,
            default:true
        },
        
    },
    data () {
        return {
            value:'',
            selectedData:[],
            columns:[
                { label: "表名", prop: "f_TableName", minWidth: 200 },
                { label: "备注", prop: "f_Description", minWidth: 200 },
                { label: "状态", prop: "f_State", width: 80,align:'center' },
            ],
            dbTableVisible: false
        }
    },
    created () {
    },
    mounted () {
    },
    computed:{
        midVisible:{
            get(){
                return this.visible;
            },
            set(val){
                this.$emit('update:visible',val);
            }
        }
    },
    methods:{
        refreshData(){
            this.$refs.selectPanel.init()
        },
        async loadSelectTable(queryData){
            queryData.keyWord = queryData.keyword
            queryData.sidx = 'F_TableName DESC'
            queryData.dbCode = this.dbCode
            const res = await this.$awaitWraper(api.getPage(queryData))
            if(res){
                return res
            }
            else{
                return {rows:[],records:0}
            }
        },
        closeDialog() {
            this.$refs.selectPanel.handleClear();
        },
        handleOpened(){
            this.$refs.selectPanel.init();
        },
        loadData(){
            this.$refs.selectPanel.init();
        },
        okDialog(showLoading, hideLoading){
            this.$emit('select',this.selectedData,showLoading, hideLoading)
            if(this.isOkClose){
                this.midVisible =false
            }
        },
        handleRowClick(){
            if(!this.multiple){
                this.$emit('select',this.selectedData,this.$refs.formDialog.showLoading,this.$refs.formDialog.hideLoading)
                if(this.isOkClose){
                    this.midVisible =false
                }
               
            }
        },
        handleOpenImport() {
            this.dbTableVisible = true
        },
        async dbTableSelect(list,showLoading, hideLoading) {
            showLoading()
            if (list.length == 0) {
                this.$message({
                    type: "warning",
                    message: "请选择一条数据!",
                })
                hideLoading()
            }
            const postData = {
                tableList:list
            }
            
            const data = await this.$awaitWraper(api.importTable(this.dbCode, postData))
            if (data) {
                this.$message({
                    type: "success",
                    message: this.$t("导入成功!"),
                })
                this.$refs.selectPanel.init()
                this.dbTableVisible = false
            }
            hideLoading()
        }
    }
}
</script>